<template>
	<view class="demand-page">
		<view class="tabs">
			<uv-tabs :current="curren" :list="tabList" :scrollable="false" lineColor="#FFC434"
				@click="tabChange"></uv-tabs>
		</view>
		<common-list :isDataEmpty="tableData.length === 0" :status="status" emptyTop="200rpx">
			<template #list>
				<view>
					<view class="list">
						<view class="item" v-for="(item, index) in tableData" :key="index"
							@click="handDetail(item, index)">
							<view class="hand">
								<view class="hand-left">
									<view class="price">{{ item.lowestPrice }}-{{ item.tallPrice }}</view>
									<view class="tag">{{ item.type === 'OPERATE' ? '营运' : '非营运' }}</view>
								</view>
								<view class="status">{{ item.statusName }}</view>
							</view>
							<view class="name">{{ item.title }}</view>
							<view class="tags">
								<view class="tag" v-for="el in item.platform" :key="el">
									{{ el }}
								</view>
							</view>
							<view class="desc">
								{{ item.otherRequire }}
							</view>
							<view class="btns">
								<template v-if="['WAIT_RECOMMEND', 'RECOMMEND'].includes(item.status)">
									<button class="cu-btn" @click.stop="handTui(item, index)">推荐车型</button>
								</template>
								<button v-if="item.status !== 'NOT_TRANSACTION'" class="cu-btn"
									@click.stop="handCall(item)">联系用户</button>
							</view>
						</view>
					</view>
				</view>
			</template>
		</common-list>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		doOrderList,
		doDetail
	} from '@/apis/demand.js'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		userList
	} from '@/hooks/userList.js'
	import CommonList from '@/components/commonList/list.vue'

	const handCall = (e) => {
		uni.makePhoneCall({
			phoneNumber: e.userCellphone
		})
	}

	const tabList = ref([{
		name: '全部',
		value: ''
	}, {
		name: '待推荐',
		value: 'WAIT_RECOMMEND'
	}, {
		name: '待确认',
		value: 'RECOMMEND'
	}, {
		name: '未成交',
		value: 'NOT_TRANSACTION'
	}, {
		name: '已成交',
		value: 'TRANSACTION'
	}])
	const curren = ref(0)
	const tabChange = (e) => {
		curren.value = e.index
		queryForm.value.status = e.value
		onRefresh()
	}

	const handTui = (e, index) => {
		uni.navigateTo({
			url: `/pagesA/order/recommend?id=${e.id}`,
			events: {
				tuiEvent: () => {
					rowChange(index)
				}
			}
		})
	}

	const handDetail = (e, index) => {
		uni.navigateTo({
			url: `/pagesA/demand/orderDetail?id=${e.id}&type=shop`,
			events: {
				backInfo: (info) => {
					if (e.status !== info.status) {
						rowChange(index)
					}
				}
			}
		})
	}
	const rowChange = async (index) => {
		const oldInfo = tableData.value[index]
		let data = await doDetail(oldInfo.id)
		data = getRow(data)
		if (oldInfo.status !== data.status && curren.value !== 0) {
			tableData.value.splice(index, 1)
		} else {
			tableData.value[index] = data
		}
	}

	const statusEnum = {
		WAIT_SNATCH: '已发布',
		WAIT_RECOMMEND: '待推荐',
		WAIT_CONFIRM: '待确认',
		RECOMMEND: '待确认',
		NOT_TRANSACTION: '未成交',
		TRANSACTION: '已成交',
	}
	const getRow = (el) => {
		el.statusName = statusEnum[el.status]
		el.platform = el.platform.split(',')
		return el
	}

	const getApi = async (params) => {
		const res = await doOrderList(params)
		res.records = res.records.map(el => {
			return getRow(el)
		})
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {}
	})
	onPullDownRefresh(() => {
		onRefresh()
	})
	onReachBottom(() => {
		onBottom()
	})
	onLoad((e) => {
		if (e.curren) {
			curren.value = Number(e.curren)
			queryForm.value.status = tabList.value[curren.value].value
		}
		onRefresh()
	})
</script>

<style lang="scss" scoped>
	.demand-page {
		min-height: 100vh;
		background-color: #F5F5F5;

		.tabs {
			position: sticky;
			top: 0;
			z-index: 3;
			background-color: #fff;
		}

		.list {
			padding: 20rpx 24rpx;

			.item {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 24rpx;
				box-sizing: border-box;
				position: relative;

				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.hand {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&-left {
						display: flex;
						align-items: center;

						.price {
							font-size: 36rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #FF4E00;
						}

						.tag {
							margin-left: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #C16F0B;
							padding: 10rpx;
							background: linear-gradient(180deg, #FFF7E4 0%, #FFE49E 100%);
							border-radius: 10rpx 0rpx 10rpx 0rpx;
						}
					}

					.status {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF930D;
					}
				}

				.name {
					margin-top: 24rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: 18rpx;
					gap: 12rpx;

					.tag {
						padding: 4rpx 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						background: #F5F5F5;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}

				.desc {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.btns {
					margin-top: 42rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.cu-btn {
						margin-left: 20rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						background: #FFC434;
						color: #333;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
</style>